<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-07-17 19:31:09
-->
<template>
  <el-card>
    <CategoryView />
  </el-card>
  <el-card class="cardTop" v-show="isAttrList">
    <el-button type="primary" :icon="Plus" @click="listToAddUpdate" :disabled="!category3Id"
      >添加属性</el-button
    >

    <el-table :data="attrList" border stripe>
      <el-table-column type="index" label="序号" width="70" />
      <el-table-column prop="attrName" label="属性名称" width="180" />
      <el-table-column prop="attrValueList" label="属性值名称列表">
        <template #default="{ row }">
          <el-tag type="success" v-for="item in row.attrValueList" :key="item.id">{{
            item.valueName
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="warning" :icon="Edit" @click="updateAttrItem(row)" />
          <el-button type="danger" :icon="Delete" @click="delAttr(row.id)" />
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-card v-show="!isAttrList" class="cardTop"
    ><el-form :model="addAttrParams" label-width="55px" :inline="true">
      <el-form-item label="属性名">
        <el-input v-model="addAttrParams.attrName" placeholder="请输入属性名" />
      </el-form-item>
      <br />
      <el-form-item>
        <el-button type="primary" @click="addAttrItem" :disabled="!addAttrParams.attrName"
          >添加属性值</el-button
        >
        <el-button @click="cancelAddAttrItem">取消</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="addAttrParams.attrValueList" style="width: 100%" border stripe>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="属性值名称">
        <template #default="{ row, $index }">
          <el-input
            ref="inputRef"
            v-model="row.valueName"
            @blur="toSpan(row, $index)"
            v-if="row.isEdit"
          />
          <span v-else @click="toInput(row)" style="display: block">{{ row.valueName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row, $index }">
          <el-popconfirm :title="`确定删除${row.valueName}吗?`" @confirm="delAttrItem($index)">
            <template #reference>
              <el-button type="danger" :icon="Delete" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-button
        type="primary"
        :disabled="!addAttrParams.attrValueList.length"
        @click="saveAttrItem"
        >保存</el-button
      >
      <el-button @click="cancelAddAttrItem">取消</el-button>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import type { AttrValueList } from '@/api/attr'
import { reqDeleteAttr } from '@/api/attr'
import { reqSaveAttrInfo } from '@/api/attr'
import { reqAttrInfoList, type IAttrInfoList } from '@/api/attr'
import { useCategoryStore } from '@/stores/category'
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import { ElMessage, type InputInstance } from 'element-plus'
import { storeToRefs } from 'pinia'
import { nextTick, ref, watch } from 'vue'

const isAttrList = ref(true)

const inputRef = ref<InputInstance>()

const addAttrParams = ref<IAttrInfoList>({
  attrName: '',
  attrValueList: [],
  categoryId: '',
  categoryLevel: 3
})

const delAttr = async (id: number) => {
  const res = await reqDeleteAttr(id)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    getAttrList()
  }
}

const saveAttrItem = async () => {
  if (addAttrParams.value.attrName.trim() === '') {
    ElMessage.error('属性名不能为空')
    return
  }
  if (addAttrParams.value.attrValueList.length === 0) {
    ElMessage.error('属性值不能为空')
    return
  }
  const res = await reqSaveAttrInfo(addAttrParams.value)
  if (res.code === 200) {
    ElMessage.success(addAttrParams.value.id ? '编辑成功' : '添加成功')
    getAttrList()
    isAttrList.value = true
  }
}

const updateAttrItem = (row: IAttrInfoList) => {
  isAttrList.value = false
  addAttrParams.value = row
}

// 取消按钮
const cancelAddAttrItem = () => {
  addAttrParams.value.attrName = ''
  addAttrParams.value.attrValueList = []
  addAttrParams.value.categoryId = ''
  addAttrParams.value.id = ''
  isAttrList.value = true
}

// 删除添加的一个属性
const delAttrItem = (index: number) => {
  addAttrParams.value.attrValueList.splice(index, 1)
}

// 到span标签
const toSpan = (row: AttrValueList, index: number) => {
  if (row.valueName?.trim() === '') {
    ElMessage.closeAll()
    ElMessage.error('不能为空')
    addAttrParams.value.attrValueList.splice(index, 1)
  }
  const flag = addAttrParams.value.attrValueList.some((item) => {
    if (item !== row) {
      return item.valueName === row.valueName
    }
  })
  if (flag) {
    ElMessage.closeAll()
    ElMessage.error('不能重复')
    addAttrParams.value.attrValueList.splice(index, 1)
  }
  row.isEdit = false
}
// 到Input标签
const toInput = (row: AttrValueList) => {
  row.isEdit = true
  nextTick(() => {
    inputRef.value?.focus()
  })
}

// 添加属性值
const addAttrItem = () => {
  addAttrParams.value.attrValueList.push({
    valueName: '',
    isEdit: true
  })
  nextTick(() => {
    inputRef.value?.focus()
  })
}

// 属性列表到添加或者编辑框
const listToAddUpdate = () => {
  isAttrList.value = false
  addAttrParams.value.categoryId = category3Id.value
}
// #region 展示属性列表
// 属性列表
const attrList = ref<IAttrInfoList[]>([])

// 获取属性store
const attrStore = useCategoryStore()
const { category1Id, category2Id, category3Id } = storeToRefs(attrStore)

// 获取属性方法
const getAttrList = async () => {
  const res = await reqAttrInfoList(
    category1Id.value as number,
    category2Id.value as number,
    category3Id.value as number
  )
  if (res.code === 200) {
    attrList.value = res.data
  }
}
watch(
  category3Id,
  (newVal) => {
    if (!newVal) {
      attrList.value = []
    } else {
      getAttrList()
    }
  },
  {
    immediate: true
  }
)
//#endregion
</script>

<script lang="ts">
export default {
  name: 'AttrView'
}
</script>

<style lang="scss" scoped>
.cardTop,
.el-table,
.el-row {
  margin-top: 18px;
}
</style>
